{% extends "editor/state_editor_row.html" %}

{% block id %}rules{% endblock %}

{% block row %}
  <div ng-repeat="(handlerName, handler) in widgetHandlers">
    {{ super() }}
  </div>
{% endblock %}

{% block label %}
  when readers <[handlerName]>:
{% endblock %}

{% block link %}
  https://code.google.com/p/oppia/wiki/Rules
{% endblock %}

{% block line1 %}
  <div class="row-fluid">
    <div ng-repeat="rule in handler" ng-hide="$last">
      <div class="span11" style="padding: 5px;">
        <rule-editor rule="rule" choices="widgetCustomizationArgs.choices" exploration-id="explorationId" states="states" add-state="addState" widget-handler-specs="widgetHandlerSpecs" is-tmp-rule="false" save-rule="saveRule" delete-rule="deleteRule(handlerName, $index)">
        </rule-editor>
      </div>

      <div class="span1">
        <span class="pull-right">
          <button ng-show="$index != 0" ng-click="swapRules(handlerName, $index, $index - 1)" class="oppia-rule-ctrl">⇑</button>
          <span ng-hide="$index != 0" class="oppia-grayed oppia-rule-ctrl">⇑</span>

          <button ng-show="$index < handler.length - 2" ng-click="swapRules(handlerName, $index, $index + 1)" class="oppia-rule-ctrl">⇓</button>
          <span ng-hide="$index < handler.length - 2" class="oppia-grayed oppia-rule-ctrl">⇓</span>
        </span>
      </div>
    </div>
  </div>
{% endblock %}

{% block line2 %}
  <div class="row-fluid" ng-show="widgetId != 'Continue'">
    <div class="span11">
      <div ng-if="!tmpRule">
        <table style="width: 100%">
          <tr>
            <td style="vertical-align: top; padding: 10px;" class="oppia-lightly-grayed">
              <button class="oppia-align-center" style="width: 100%;" ng-click="createTmpRule()">
                Add new rule
              </button>
            </td>
          </tr>
        </table>
      </div>

      <div ng-if="tmpRule">
        <rule-editor rule="tmpRule" choices="widgetCustomizationArgs.choices" exploration-id="explorationId" states="states" add-state="addState" widget-handler-specs="widgetHandlerSpecs" is-tmp-rule="true" save-tmp-rule="saveTmpRule" delete-rule="cancelTmpRule()">
        </rule-editor>
      </div>
    </div>

    <div class="span1">
    </div>
  </div>
{% endblock %}

{% block line3 %}
  <div class="row-fluid">
    <div class="span11" style="padding: 5px;">
      <rule-editor rule="handler[handler.length - 1]" choices="widgetCustomizationArgs.choices" exploration-id="explorationId" states="states" add-state="addState" all-rule-types="allRuleTypes" widget-handler-specs="widgetHandlerSpecs" is-tmp-rule="false" save-rule="saveRule">
      </rule-editor>
    </div>
    <div class="span1">
      <span class="pull-right">
        <span class="oppia-grayed oppia-rule-ctrl"> ⇑ </span>
        <span class="oppia-grayed oppia-rule-ctrl"> ⇓ </span>
      </span>
    </div>
  </div>
{% endblock %}
